<template>
  <div class="common_page statistical_wrap">
    <div class="statistical_box">
      <div class="statistics-head">
        <div>活动投票统计</div>
        <div class="num_wrap">
          总票数
          <span>{{ vcDetail.vc }}</span>
        </div>
        <div class="num_wrap">
          今日票数
          <span>{{ vcDetail.todayVc }}</span>
        </div>
      </div>
      <div class="statistics-head">
        <div>活动投票日志</div>
        <div class="num_wrap">
          访问量
          <span>{{ pvDetail.pv }}</span>
        </div>
        <div class="num_wrap">
          今日访问量
          <span>{{ pvDetail.todayPv }}</span>
        </div>
      </div>
    </div>
    <div class="head_tips">
      <div class="tips_title">活动票数/天</div>
      <div class="details">
        <div class="left">
          今日票数： <span>{{ todayVc }}票</span>
        </div>
        <div>
          <el-date-picker
            @change="handleBeginTime1"
            v-model="value1"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div id="day_map" style="width: 1200px; height: 500px"></div>

    <div class="head_tips">
      <div class="tips_title">活动访问量/周</div>
      <div class="details">
        <div class="left">
          总访问量： <span>{{ lastWeekPv }}</span>
        </div>
        <div>
          <el-date-picker
            @change="handleBeginTime2"
            v-model="value2"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div id="day_week" style="width: 1200px; height: 500px"></div>
    <div id="china_map" style="width: 1200px; height: 600px"></div>
    <div class="head_tips">
      <div class="tips_title">活动投票日志</div>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;margin-top:20px;"
      >
        <el-table-column prop="userNickname" label="微信" align="center">
        </el-table-column>
        <el-table-column prop="contestantName" label="选手" align="center">
        </el-table-column>
        <el-table-column prop="ip" label="IP" align="center"> </el-table-column>
        <el-table-column prop="userArea" label="地区" align="center">
        </el-table-column>
        <el-table-column prop="createdTime" label="投票时间" align="center">
        </el-table-column>
      </el-table>
      <div class="paginationblock" v-if="total">
        <el-pagination
          background
          @current-change="handleChangePage"
          :page-size="query.pageSize"
          :current-page="query.pageNum"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
let echarts = require("echarts");
import "../../../utils/china";
import { color_list } from "@/utils/data";
import { formatDate } from "@/utils/filter";
export default {
  data() {
    return {
      value1: new Date(),
      value2: new Date(),
      areaList: [
        // {
        //   name: "四川",
        //   value: 0,
        //   num: 10,
        // },
        // {
        //   name: "重庆",
        //   value: 1,
        //   num: 100,
        // },
      ],
      piecesList: [],
      vcDetail: {},
      pvDetail: {},
      todayVc: 0,
      lastWeekPv: 0,
      query: {
        contestantId: "",
        pageNum: 1,
        pageSize: 10,
        voteId: this.$route.query.id,
      },
      tableData: [],
      total: 0,
    };
  },
  mounted() {
    this.getAreaList();
    this.getDayList();
    this.getWeekList();
    this.getstatisticVC();
    this.getstatisticPV();
    this.getRecord();
  },
  methods: {
    handleChangePage(value) {
      this.query.pageNum = value;
      this.getRecord();
    },
    getRecord() {
      this.$api("vote.record", this.query).then((res) => {
        console.log(res);
        this.total = res.count;
        console.log(res);
        this.tableData = res.data;
      });
    },
    //获取活动投票统计
    getstatisticVC() {
      this.$api("statistical.statisticVC", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.vcDetail = res;
      });
    },
    //
    getstatisticPV() {
      this.$api("statistical.statisticPV", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.pvDetail = res;
      });
    },
    getAreaList() {
      //获取地区数据
      let piecesArr = []; //处理后右边区域展示的数据
      this.$api("statistical.area", {
        voteId: this.$route.query.id,
      }).then((res) => {
        for (let k in res) {
          piecesArr.push({
            // value: index,
            label: `${k} / ${res[k]}人`,
            // color: color_list[index],
          });
        }
        piecesArr.forEach((item, index) => {
          item.value = index;
          item.color = color_list[index];
        });
        if (!piecesArr.length) {
          piecesArr = [
            {
              label: "无数据",
              value: 0,
              color: "#999",
            },
          ];
        }
        this.piecesList = piecesArr;
        this.initMap();
      });
    },
    initMap() {
      let that = this;
      let chinachart = echarts.init(document.getElementById("china_map"));
      let chartOption = {
        visualMap: {
          // 左下角的颜色区域
          type: "piecewise", // 定义为分段型 visualMap
          itemWidth: 40,
          itemHeight: 20,
          bottom: 0,
          top: 0,
          right: 0,
          align: "left",
          pieces: that.piecesList,
          textStyle: {
            fontSize: 14,
          },
        },
        geo: {
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true,
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            borderColor: "rgba(0, 0, 0, 0.1)",
            emphasis: {
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.2)",
            },
          },
        },
        series: [
          {
            name: "", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
            data: that.areaList,
          },
        ],
      };
      chinachart.setOption(chartOption);
    },
    getDayList() {
      let data1 = [];
      let data2 = [];
      this.$api("statistical.dayVC", {
        createdTime: formatDate(this.value1, "YYYY-MM-DD"),
        voteId: this.$route.query.id,
      }).then((res) => {
        this.todayVc = res.todayVc;
        res.hours.forEach((item) => {
          data1.push(item.k.slice(0, 2));
          data2.push(item.v);
        });
        this.initDay(data1, data2);
      });
    },
    handleBeginTime1() {
      this.getDayList();
    },
    handleBeginTime2() {
      this.getWeekList();
    },
    initDay(data1, data2) {
      let chartDom = document.getElementById("day_map");
      let myChart = echarts.init(chartDom);
      let option = {
        color: ["#3398ff"],
        xAxis: {
          type: "category",
          data: data1,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data2,
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getWeekList() {
      let data1 = [];
      let data2 = [];
      this.$api("statistical.weekVC", {
        createdTime: formatDate(this.value2, "YYYY-MM-DD"),
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.lastWeekPv = res.lastWeekPv;
        res.days.sort((a, b) => {
          return new Date(a.k).getTime() - new Date(b.k).getTime();
        });
        res.days.forEach((item) => {
          data1.push(item.k);
          data2.push(item.v);
        });
        this.initWeek(data1, data2);
      });
    },
    initWeek(data1, data2) {
      let chartDom = document.getElementById("day_week");
      let myChart = echarts.init(chartDom);
      let option = {
        color: ["#3398ff"],
        xAxis: {
          type: "category",
          data: data1,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data2,
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.statistical_wrap {
  padding-bottom: 50px;
  .statistical_box {
    .statistics-head {
      padding: 15px 0;
      display: flex;
      margin-left: 50px;
      align-items: center;
      font-size: 14px;
      color: #999;
      .num_wrap {
        margin-left: 40px;
        span {
          font-size: 22px;
        }
      }
    }
  }
  .head_tips {
    margin-top: 30px;
    margin-left: 50px;
    width: 1200px;
    .tips_title {
      font-size: 20px;
      font-weight: bold;
      border-left: 2px solid $themeColor;
      padding: 0 15px;
    }
    .details {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .left {
        font-size: 14px;
        color: #999;
        span {
          color: $themeColor;
        }
      }
    }
  }
  .paginationblock {
      margin-top: 30px;
    }
}
</style>